<template>
  <div class="detail-brand" v-if="brand">
    <tag tag="品牌" />
    <div class="brand" @click="$router.push(`/product/brand-view/${brand.id}`)">
      <div class="image" v-if="brand.image && brand.image.thumbnail_path">
        <img v-lazy="brand.image.thumbnail_path" />
      </div>
      <div class="name">{{ brand.name }}</div>
    </div>
  </div>
</template>

<script>
import Tag from './Tag'
export default {
  name: 'DetailBrand',
  props: {
    brand: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  components: { Tag }
}
</script>

<style scoped lang="stylus">
.detail-brand
  margin 10px
  padding 10px
  background white
  border-radius 10px
  text-align left
  .brand
    display flex
    padding 10px
    align-items center
    .image
      width 75px
    .name
      flex 1
      text-align center
      letter-spacing 1.5px
      font-weight 700
      font-size 16px
      color $second_color
</style>
